<template>
	<view class="content">
		<!--  -->
		<view class="header">
			<view class="header-bg">
				<view class="uinfo">
					<view class="left">
						<image src="@/static/pics/face.png" mode="aspectFill" class="face"></image>
						<text class="username">Alan</text>
					</view>
					<view class="right">
						<image src="../../static/icons/menu.png" mode="aspectFill" class="menu"></image>
					</view>
				</view>
			</view>
		</view>
		
		<!--引入facebook 第三方组件-->	
		<!-- <v-facebook-login app-id="966242223397117" @sdk-init="facebookSDKinit" @login="facebookLogin" @logout="facebookLogout"></v-facebook-login> -->
	</view>
</template>

<script>
	// FaceBook 快捷登陆组件
	import VFacebookLogin from 'vue-facebook-login-component'
	export default {
		data() {
			return {
			}
		},
		components: {
			// FaceBoox 快捷登陆组件
			VFacebookLogin,
		},
		onLoad() {

		},
		methods: {
			// FaceBook SDk 初始化回调
			facebookSDKinit(res) {
				console.log("FaceBook SDk 初始化完成！", res)
			},
			// FaceBook 登陆成功回调
			facebookLogin(res) {
				console.log(res)
				let accesstoken = response.authResponse.accessToken;
				let userid = response.authResponse.userID;
				// 登录到您的应用程序。这边就可以把accesstoken和userid发送到你的服务器， 来进行校验了
			},
			// FaceBook 退出成功回调
			facebookLogout(res) {
				console.log(res)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #F6F6F6;
		width: 100%;
		min-height: 100vh;
	}

	.header {
		width: 718upx;
		height: 296upx;
		border-radius: 24upx;
		margin-left: 16upx;
		background-image: url(../../static/pics/header-bg.png);
		background-size: cover;
		margin-top: 162upx;

		.header-bg {
			width: 100%;
			height: 100%;
			border-radius: 24upx;
			background-color: rgba(0, 0, 0, 0.4);

			.uinfo {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.left {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 22upx;

					.face {
						width: 66upx;
						height: 66upx;
						border-radius: 50%;
						margin-left: 16upx;
					}

					.username {
						color: #FFFFFF;
						font-size: 32upx;
						margin-left: 20upx;
					}
				}

				.right {
					.menu {
						width: 36upx;
						height: 36upx;
						margin-right: 20upx;
					}
				}
			}
		}
	}
</style>
